<!DOCTYPE HTML>
<html lang="zh_CN" ng-app="myApp">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/angular.js"></script>
		<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
		<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<style type="text/css">
			.list-group {
				height: 411px;
			}
			
			.loading {
		/*		background: url(http://xh-css.qiniudn.com/loading.gif) no-repeat center center;*/
			}
		</style>
	</head>

	<body>
		<div class="container" ng-controller="MainCtrl">
			<div class="panel panel-info">
				<div class="panel-heading">分页练习</div>
				<div class="panel-body">
					<ol class="list-group" ng-class="{'loading':lists.length == 0}">
						<li class="list-group-item" ng-repeat="list in lists" ng-bind-template="{{list.name}}:::{{list.url}}"></li>
					</ol>
				</div>
				<div class="panel-footer">
					<my-page total-item="300" page-url="http://xh-css.qiniudn.com/cdn.json" max-size="5" align="text-center" items-perpage="10" current-page="1"></my-page>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
		<script type="text/javascript">
			var myApp = angular.module("myApp", []);
			//控制器
			myApp.controller("MainCtrl", ["$scope", "$http", function($scope, $http) {
				$scope.lists = [];
			}]);
			/*分页指令
			 * 只需要按照格式给出对应的接口即可，如果格式有变化你可以自行修改取值那块的代码即可
			 * */
			myApp.directive("myPage", ['$http', function($http) {
				return {
					scope: {
						totalItem: "@totalItem",
						currentPage: "=currentPage",
						itemsPerpage: "@itemsPerpage",
						pageUrl: "@pageUrl"
					},
					restrict: "EA",
					replace: true,
					transclude: true,
					template: '<nav class="{{align}}">\
                        <ul class="pagination">\
                            <li ng-class="{disabled:curr == 1}" ng-click="setChange(currentPage=currentPage-1)"><a aria-label="Previous" href="#"><span aria-hidden="true">上一页</span></a></li>\
                            <li ng-class="{active:$index + 1 == curr}" ng-repeat="page in pages" ng-click="change(page)"><a href="#">{{page}}</a></li>\
                            <li ng-class="{disabled:currentPage == pageNumber}" ng-click="setChange(currentPage=currentPage+1)"><a aria-label="Next" href="#"><span aria-hidden="true">下一页</span></a></li>\
                        </ul>\
                    </nav>',
					link: function(scope, element, attrs) {
						scope.pageNumber = Math.ceil(parseInt(attrs.totalItem) / parseInt(attrs.itemsPerpage));
						scope.maxsize = Math.max(attrs.maxSize, 5);
						scope.pages = [];
						scope.curr = scope.currentPage;
						scope.resPages = [];
						scope.align = attrs.align;
						for(var i = 1; i <= scope.pageNumber; i++) {
							scope.resPages.push(i);
						};
						scope.pages = scope.resPages.slice((scope.currentPage - 1), scope.maxsize);
						//点击切换分页
						scope.change = function(page) {
							scope.currentPage = page;
							if(scope.currentPage - 3 <= 0) {
								var start = 0;
								var end = start + scope.maxsize;
							} else if(scope.currentPage + 2 >= scope.pageNumber) {
								var end = scope.pageNumber;
								var start = end - scope.maxsize;
							} else {
								var start = scope.currentPage - 3;
								var end = scope.currentPage + 2;
							}
							scope.pages = scope.resPages.slice(start, end);
							scope.curr = scope.pages.indexOf(page) + 1;
							//调用ajax取值回来渲染
							scope.$parent.lists = [];
							$http({
									"url": attrs.pageUrl,
									"method": "get",
									"params": {
										"currentPage": page,
										"perPage": attrs.itemsPerpage
									}
								})
								.success(function(res) {
									//这里res我给出的数据是数组当然你返回的不一定是这个数据结构，你可以自行修改，比如res.list是数组等等
									scope.$parent.lists = res.slice((page - 1) * attrs.itemsPerpage, page * attrs.itemsPerpage);
								})
								.error(function(res) {
									console.log(res);
								});
						};
						scope.change(1); //初始化
						//点击上一页下一页
						scope.setChange = function(page) {
							if(page <= 0) {
								scope.currentPage = page + 1;
							} else if(page > scope.pageNumber) {
								scope.currentPage = page - 1;
							} else {
								scope.change(page);
							}
						}
					}
				}
			}]);
		</script>
	</body>

</html>